<template>
	<view class="uni_box home">
		<!-- <image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" /> -->
		<navbar title='飞单举报'>
		</navbar>
		<view class="content">
			<view class="titwo">
				<view class="bm">
					<image class="img_tx" :src="info.boss.avatar" />
					<text class="xm">{{info.boss.nickname}}</text>
					<text class="xb">{{info.boss.gender}}</text>
					<!-- <text class="sjih">153****3334</text> -->
				</view>
				<text class="gname">{{info.title}}</text>
				<view class="renlist">
					<text class="rentit">任务时间</text>
					<text class="renval">{{info.startday+' ' +info.starthour}}</text>
				</view>
				<view class="renlist flex-col">
					<text class="rentit">招工地点</text>
					<text class="renval">{{info.address_text}}</text>
				</view>
				
			</view>
			<view class="smfd">
				<view class="fditem">
					<text class="snname">1.请说明一下老板具体飞单行为！<text class="hong">*</text></text>
					<view class="wenzi">
						<u-input v-model="form.content" type="textarea" placeholder='如:老板加微信后让我直接去干活;老板让我第二天不通过平台直接去干活' />
					</view>
				</view>
				<view class="fditem">
					<text class="snname">2.上传飞单老板的手机号或微信号截图<text class="hong">*</text></text>
					<view class="tuview">
						<view class="tuitem tuchuan" v-if="form.phone_image" @click="getyulan(form.phone_image)">
							<image class="icon_zp" :src="form.phone_image" mode="" />
						</view>
						<view class="tuitem" @click="upload(1)">
							<image class="icon_zp" src="@/pages_client/static/img/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
						
					</view>
				</view>
				<view class="fditem">
					<text class="snname">3.上传飞单聊天记录截图</text>
					<view class="tuview">
						<view class="tuitem tuchuan" v-if="form.wechat_image" @click="getyulan(form.wechat_image)">
							<image class="icon_zp" :src="form.wechat_image" mode="" />
						</view>
						<view class="tuitem" @click="upload(2)">
							<image class="icon_zp" src="@/pages_client/static/img/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
					</view>
				</view>
				<view class="fditem">
					<text class="snname">4.上传老板的飞单发薪记录截图</text>
					<view class="tuview">
						<view class="tuitem tuchuan" v-if="form.money_image" @click="getyulan(form.money_image)">
							<image class="icon_zp" :src="form.money_image" mode="" />
						</view>
						<view class="tuitem" @click="upload(3)">
							<image class="icon_zp" src="@/pages_client/static/img/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
					</view>
				</view>
				<view class="fditem">
					<text class="snname">5.在飞单企业的考勤记录</text>
					<view class="tuview">
						<view class="tuitem tuchuan" v-if="form.work_image" @click="getyulan(form.work_image)">
							<image class="icon_zp" :src="form.work_image" mode="" />
						</view>
						<view class="tuitem" @click="upload(4)">
							<image class="icon_zp" src="@/pages_client/static/img/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="newbot">
			
			<view class="botview">
				<view class="lianxi" @click="gettijiao">
					<text class="lname">提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		components: {
		},
		data() {
			return {
				swlist: [{
						image: '/static/banner.png',
					},
					{
						image: '/static/banner.png',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				tablist: [{
					name: '商品详情'
				}, {
					name: '视频'
				}, {
					name: '交易规则'
				}],
				current: 0,
				backgroundColor:'none',
				phoneshow:false,
				ordershow:false,
				sm:'',
				id:'',
				form:{
					id:'',
					content:'',
					phone_image:'',//联系方式截图
					wechat_image:'',//聊天截图
					money_image:'',//发薪记录
					work_image:'',//考勤记录
				},
				info:{},
				updatetype:1

			}
		},
		onLoad(option) {
			if(option.id){
				this.form.id = option.id
			}
			this.getDetail()
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.getOrderInfo({
					id:this.form.id
				});
				this.info = res.info
			},
			change(index) {
				this.current = index;
			},
			confrimOrderSucess(){
				this.navrouter("/pages_client/twoPage/OrderSucess");
			},
			upload(e) {
				this.updatetype = e
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
					}
				});
			},
			unloadtou(){
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'token': uni.getStorageSync('token'),
					},
					formData: {
						'token':uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						if(JSON.parse(uploadFileRes.data).code == 1){
							if(that.updatetype == 1){
								that.form.phone_image = that.ossThree(JSON.parse(uploadFileRes.data).data.url)
							}else if(that.updatetype == 2){
								that.form.wechat_image = that.ossThree(JSON.parse(uploadFileRes.data).data.url)
							}else if(that.updatetype == 3){
								that.form.money_image = that.ossThree(JSON.parse(uploadFileRes.data).data.url)
							}else if(that.updatetype == 4){
								that.form.work_image = that.ossThree(JSON.parse(uploadFileRes.data).data.url)
							}
							
						}else{
							that.$u.toast(JSON.parse(uploadFileRes.data).msg);
						}
						// that.getinfo()
					}
				});
			},
			getyulan(e){
                uni.previewImage({
                    current: e, // 当前显示图片的 http 链接
                    urls: [e] // 需要预览的图片 http 链接列表
                });
            },
			async gettijiao(){
				
				if(!this.form.content){
					this.$u.toast("请输入具体行为");
					return;
				}
				if(!this.form.phone_image){
					this.$u.toast("请上传‘手机号或微信号截图");
					return;
				}
				let res = await this.$u.api.addJubaoBoss(this.form);
				this.$u.toast("操作成功");
				this.getClear()
			},
			getClear(){
				this.form = {
					id:this.id,
					content:'',
					phone_image:'',//联系方式截图
					wechat_image:'',//聊天截图
					money_image:'',//发薪记录
					work_image:'',//考勤记录
				}
			}
		},
		onPageScroll(e) {
			// console.log('页面滚动距离:', e.scrollTop);
			// 在这里编写滚动相关的逻辑
			if(e.scrollTop>=200){
				this.backgroundColor = '#ffffff'
			}else{
				this.backgroundColor = 'none'
			}
			this.$forceUpdate()
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.bghome{
		width: 100%;
		position: absolute;
		top: 0;
		height: 550rpx;
		
	}
	.content{
		// background-color: #fff;
		padding-bottom: 130rpx;
		position: relative;
		.lc{
			margin: 20rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.bq{
				width: 28rpx;
				height: 28rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 800;
				font-size: 22rpx;
				color: #FFEFE9;
				margin-right: 5rpx;
			}
			.bqname{
				font-weight: 500;
				font-size: 24rpx;
				color: #EA5918;
				display: inline-block;
				margin-right: 5rpx;
				white-space: nowrap;
			}
			.icon-xyb{
				width: 42rpx;
				height: 31rpx;
				margin-right: 9rpx;
			}
		}
		.tieone{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			margin: 24rpx 30rpx 0;
			.tname{
				font-weight: 800;
				font-size: 40rpx;
				color: #111111;
			}
			.bqitem{
				margin: 20rpx 0;
			}
			.sc{
				display: flex;
				padding: 4rpx 20rpx;
				flex-direction: row;
				align-items: center;
				border-radius: 6rpx;
				font-weight: 500;
				font-size: 24rpx;
				margin-right: 15rpx;
				background-color: rgba(245, 245, 245, 1);
				color: #999999;
				.icon_bz{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
			.bqitem{
				display: flex;
				flex-direction: row;
			}
			.lv{
				background-color: rgba(233, 255, 235, 1);
				color: #16B925;
			}
			.chengse{
				background-color: rgba(255, 238, 231, 1);
				color: #F07F4C;
			}
			.bm{
				display: flex;
				flex-direction: row;
				margin-top: 10rpx;
				.bmleft{
					font-weight: 800;
					font-size: 44rpx;
					color: #EA5918;
				}
				.danwei{
					font-weight: bold;
					font-size: 24rpx;
					color: #EA5918;
				}
			}
			.ywxian{
				display: flex;
				padding: 6rpx 15rpx;
				background: #E9FFEB;
				border-radius: 6rpx;
				align-items: center;
				margin-top: 20rpx;
				.icON_bz{
					margin-right: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
				.jianame{
					font-weight: 500;
					font-size: 24rpx;
					color: #16B925;
				}
				.icon_lvnext{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
		
		.dtwo{
			padding: 30rpx;
		}
		.dname{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.dfen{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 20rpx 0 0;
			.dfenitem{
				padding: 8rpx 20rpx;
				background: #EEEEEE;
				border-radius: 4rpx;
				margin-right: 20rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
			.gone{
				height: 26rpx;
				margin-right: 20rpx;
				width: 108rpx;
			}
			.dmiao{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.dthree{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.sname{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: block;
				margin-bottom: 30rpx;
			}
			.slist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.sitem{
					width: 50%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.ziname{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						min-width: 90rpx;
					}
					.zval{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						display: inline-block;
						margin-left: 8rpx;
					}
					.cha{
						font-weight: 500;
						color: #42ABDC;
					}
				}
			}
		}

		.dfour{
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.tou{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.dfnav{
				width: 60%;
				display: flex;
				flex-direction: column;
				.dfname{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.dfmiao{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			.dfright{
				display: flex;
				margin-left: auto;
				flex-direction: row;
				align-items: center;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.icon_next{
					margin-left: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.dfive{
			padding: 20rpx;
			.dcont{
				padding: 20rpx 0;
				border-top: 1rpx solid #eee;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		
	}
	.smfd{
		background: #FFFFFF;
		border-radius: 30rpx;
		padding:40rpx 30rpx;
		margin: 30rpx;
		.fditem{
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
			.snname{
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
				display: block;
				margin-bottom: 20rpx;
			}
			.hong{
				font-weight: bold;
				font-size: 28rpx;
				color: #EA5918;
				display: inline-block;
				margin-left: 14rpx;
			}
			.wenzi{
				background: #F8F8F8;
				border-radius: 20rpx;
				padding: 20rpx;
			}
			.tuview{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.tuitem{
					margin: 0 30rpx 0 0;
					width: 160rpx;
					height: 160rpx;
					background: #F8F8F8;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					position: relative;
					.icon_zp{
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 20rpx;
					}
					text{
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}
				}
				.tuchuan{
					.icon_zp{
						position: absolute;
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
						margin-bottom: 0;
					}
				}
			}
		}
		.fditem:last-child{
			margin-bottom: 0;
		}
	}
	.titwo{
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		margin: 24rpx 30rpx 0;
		.anquan{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.icon_aq{
				margin-right: 8rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.jubao{
				font-weight: bold;
				font-size: 24rpx;
				color: #999999;
			}
			.icon_nexthui{
				margin-left: 5rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
		.gname{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
		}
		.gnamenew{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
		}
		.tishi{
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}
		.renlist{
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;
			.rentit{
				display: inline-block;
				width: 130rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.renval{
				font-weight: bold;
				font-size: 24rpx;
				color: #111111;
			}
			.lv{
				font-weight: bold;
				font-size: 24rpx;
				color: #16B925;
			}
		}
		.rval{
			display: flex;
			flex-direction: column;
			.sm{
				background: #FFEEE7;
				border-radius: 5rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 5rpx 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-top: 9rpx;
			}
		}
		
		.renlist:last-child{
			margin-bottom: 0;
		}
		.flex-col{
			display: flex;
			flex-direction: column;
		}
		.ditishi{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			display: block;
			text-align: center;
			margin-top: 20rpx;
		}
		.dizhi{
			position: relative;
			width: 100%;
			margin-top: 20rpx;
			height: 155rpx;
			.dizhiicon{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.diitem{
				position: relative;
				padding: 40rpx 30rpx 20rpx 40rpx;
				display: flex;
				flex-direction: row;
				.dileft{
					width: 80%;
					display: flex;
					flex-direction: column;

				}
				.diname{
					max-width: 100%;
					display: block;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
				}
				.dimiao{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin-top: 10rpx;
				}
				.chadi{
					margin-left: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon_dw{
						width: 28rpx;
						height: 28rpx;
						margin-bottom: 10rpx;
					}
					text{
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}

		}
		.bm{
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			align-items: center;
			border-bottom: 1rpx solid #EEEEEE;
			padding-bottom: 20rpx;
			.zfabu{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				display: inline-block;
				margin-right: 20rpx;
			}
			.img_tx{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.sjih{
				margin-left: auto;
				font-weight: bold;
				font-size: 30rpx;
				color: #999999;
			}
			.xm{
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
			}
			.xb{
				width: 30rpx;
				height: 30rpx;
				background: #DFFAFF;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #3EABFF;
				margin-left: 10rpx;
			}

			.bmleft{
				font-weight: 800;
				font-size: 44rpx;
				color: #EA5918;
			}
			.danwei{
				font-weight: bold;
				font-size: 24rpx;
				color: #EA5918;
			}
		}
		.hpl{
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			padding: 25rpx 0;
			margin: 20rpx 0;
			.plitem{
				flex: 1;
				display: flex;
				flex-direction: column;
				border-right: 1rpx solid rgba(204, 204, 204, 1);
				align-items: center;
				justify-content: center;
				.pnum{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
				}
				.pname{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
			.plitem:last-child{
				border-right: none;
			}
		}
	}
	.newbot{
		display: flex;
		flex-direction: column;
		// height: 200rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.wenxin{
		height: 80rpx;
		background: #FFEEE5;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		.wentit{
			border-radius: 6rpx;
			background-color: rgba(238, 127, 88, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 54rpx;
			height: 54rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #FF5142;
			text-align: center;
		}
		.tiwen{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			text{
				font-weight: 500;
				font-size: 20rpx;
				color: #EA5918;
			}
		}
	}
	.yuedu{
		height: 80rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		background-color: #fff;
		.icon_xz_n{
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
		.xy{
			font-weight: 500;
			font-size: 20rpx;
			color: #999999;
		}
		.xyhu{
			color: rgba(234, 89, 24, 1);
		}
	}
	.botview{
			height: 120rpx;
			background: #FFFFFF;
			width: 100%;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 10;
			// border-top: 1rpx solid #eee;
			padding: 0 30rpx 20rpx 30rpx;
			.botleft{
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.icon_fenxiang{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 5rpx;
				}
				text{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666;
				}
			}
			.lianxi{
				margin-left: auto;
				width: 100%;
				height: 90rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				.lname{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.lmiao{
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
			.liantwo{
				display: flex;
				flex-direction: row;
				flex: 1;
				.qubtn{
					height: 90rpx;
					width: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F5F5F5;
					border-radius: 45rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.queren{
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					color: #fff;
					margin-left: auto;
				}
			}
		}
	.zhanwei{
		height: 20rpx;
		width: 100%;
		background-color: #f6f6f6;
	}
</style>
